<html>
    <head>
        <title>{%block title%}{%endblock%}</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <script src="http://code.jquery.com/jquery-latest.js"></script>
            <link href="/media/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
            <script src="/media/static/bootstrap/js/bootstrap.min.js"></script>

                        
            <script src="/media/static/bootstrap-ajax/vendor/spin.min.js"></script>
            <script src="/media/static/bootstrap-ajax/js/bootstrap-ajax.js"></script>
            <script src="/media/static/bootstrap/js/bootstrap-dropdown.js"></script>


        {%block javascript%}
        <script>
        refresh_interval=500;
        refresh_interval={{default_refresh_interval}};
        
   
        
        
        $(document).ready(function(e) {
            
            $('#SOCKETMonitorToogle').click(function(){
                //changeStyle(["btn btn-primary","btn btn-inverse"],$('#SOCKETMonitorToogle'));
                if($('#SOCKETMonitorToogle').attr("class")=="btn btn-primary"){        
                    var jqxhr = $.ajax( "/dapi/setvar/MITM_STATUS/1/" );
                
                }else{         
                    var jqxhr = $.ajax( "/dapi/setvar/MITM_STATUS/0/");
                
                };
            }); 
            
            {%for soc in ws%}
                $('#socket_{{soc.pk}}').click(function(){
                        change_scheme(this);
                        refresh_interface();
                });
            {%endfor%}
            {%for soc in ss%}
                $('#serialsocket_{{soc.pk}}').click(function(){
                        change_scheme(this);
                        refresh_interface();
                });
            {%endfor%}
           
           
           var change_scheme=function(obj){
                porttype="";
                arr=obj.value.split(":");
                if(arr[2]=="N"){
                    // Network Connections change
                    var jqxhr = $.ajax( "/dapi/setvar/WEB_SOCKET_PORT/"+arr[0]+"/");
                }else{
                    // Serial Connections change
                    var jqxhr = $.ajax( "/dapi/setvar/SERIAL_PORT/"+arr[0]+"/");
                };
           
           }
           
           $('#autorefresh').click(function(){
           
            if ($('#autorefresh').is(':checked')) {
                on_refresh();
            } else {
                off_refresh();
            } 
           
           

            
           });
           
           

           on_refresh();
            
            
        });
        
        
        var progress_refresh=function(){

                        var $bar = $('#refresh_progress');
                        var old=parseInt($bar.css('width').split("px")[0]);
                        maxpx=800;
                        if(old>maxpx){
                            $bar.css('width',0);
                        }else{
                            $bar.css('width',old+50);
                        }
                        
                    





        
        
        }
        
        
        var refresh_interface=function (){
            progress_refresh();
            refresh_MITM_status();
            progress_refresh();
            refresh_SOCKET_status();
            progress_refresh();
            
        };


        var off_refresh = function (){
            clearInterval(ref);
            var $bar = $('#refresh_progress_div');
            //$bar.removeAttr('class');
            //$bar.addClass('progress')
            //$bar.addClass('progress-striped')
            $bar.removeClass("active");

        }
        var on_refresh = function (){
            ref=setInterval('refresh_interface()', refresh_interval)
            var $bar = $('#refresh_progress_div');
            //$bar.removeAttr('class');
            //$bar.addClass('progress')
            //$bar.addClass('progress-striped')
            $bar.addClass('active');

        }

        var refresh_SOCKET_status = function(){
            var sockets = [{%for s in ss%}'{{s}}',{%endfor%}];
            var sockets_i = [{%for s in ss%}'{{s.pk}}',{%endfor%}];
            var wsockets = [{%for w in ws%}'{{w}}',{%endfor%}];
            var wsockets_i = [{%for w in ws%}'{{w.pk}}',{%endfor%}];

        
                url="/dapi/getvar/SERIAL_PORT/";
                var jqxhr = $.ajax(url).done(function(data) { 
                    for(s in sockets){
                        if(sockets[s]==data.SERIAL_PORT){
                            var object=$('#serialsocket_'+(parseInt(sockets_i[s])).toString());

                            object.removeAttr('class');
                            object.attr('class', '');
                            object.addClass("btn btn-warning");
                        }else{
                            var object=$('#serialsocket_'+(parseInt(sockets_i[s])).toString());
                            object.removeAttr('class');
                            object.attr('class', '');
                            object.addClass("btn btn-success");
                        
                        
                        }
                    }
                       
                 });


                url="/dapi/getvar/WEB_SOCKET_PORT/";
                var jqxhr = $.ajax(url).done(function(data) { 
                    for(w in wsockets){
                        if(wsockets[w]==data.WEB_SOCKET_PORT){
                            var object=$('#socket_'+(parseInt(wsockets_i[w])).toString());
                            object.removeAttr('class');
                            object.attr('class', '');
                            object.addClass("btn btn-warning");
                        }else{
                            var object=$('#socket_'+(parseInt(wsockets_i[w])).toString());
                            object.removeAttr('class');
                            object.attr('class', '');
                            object.addClass("btn btn-success");
                        
                        
                        }
                    }
                       
                 });

            


        };


        var refresh_MITM_status = function(){
        
            button=$('#SOCKETMonitorToogle');
            styles=["btn btn-primary","btn btn-inverse"];
            url="/dapi/getvar/MITM_STATUS/";
            
            var jqxhr = $.ajax(url).done(function(data) { 
                    if(data.MITM_STATUS=="True"){
                            changeStyle(styles[0],button); 
                    }else{
                            changeStyle(styles[1],button); 
                    };
             });

        };
        
        
        var changeStyle = function(style,object){
            object.removeAttr('class');
            //object.attr('class', '');
            object.addClass(style);

        }
        
        var switchStyle = function(styles,object){
             if(object.attr("class")==styles[0]){
                    object.removeClass(styles[0]);
                    object.addClass(styles[1]);                
                }else{
                    object.removeClass(styles[1]);
                    object.addClass(styles[0]);                  
                };
        
        };


// perform other work here ...

// Set another completion function for the request above

        
        </script>
        {%endblock%}
        
        {%block css%}
        
      
        
        {%endblock%}
        
        
    </head>
<body>






        {%block header%}
        
<div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Аrdu Аndo MITM</a>
          
        {%block menu%}
          <div class="nav-collapse collapse">
            <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#SocketModalWindows" role="button" class="btn-inverse" data-toggle="modal">Схема соединения</a></li>
                <li><a href="#FilterModalWindows" role="button" class="btn-inverse" data-toggle="modal">Настройки фильтров</a></li>
                <li><a href="/admin/">Параметры</a></li>                
              </li>
            </ul>
          </div><!--/.nav-collapse -->
           {%endblock%}
        </div>
      </div>
    </div>        
        
        {%endblock%}



        {%block content%}
        
 <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">


            <label class="checkbox" ><input checked id="autorefresh" class="btn" type="checkbox">Автообновление</label>
                <div id="refresh_progress_div" class="progress progress-striped active">
                  <div id="refresh_progress" class="bar" style="width:0%;"></div>
                </div>

               <a href="#" class="btn btn-primary" id="SOCKETMonitorToogle"  data-append="#SOCKETMonitor" data-refresh="#SOCKETMonitor">
                    <i class="icon icon-check"></i>
                    Открыть
                </a>
<p></p>
    <div class="well" id="monitor" style="height:200px">
        
    </div>






<div class="row-fluid"><code>
        <div class="span12 max_height" id="SOCKETMonitor">
        

                
         
       </div> </code>               
               
</div> 










        
        
        
      </div>


      <div class="hero-unit">

<table class="table table-hover">
  <caption>Монитор</caption>
  <thead>
    <tr>
      <th>xMag</th>
      <th>yMag</th>
      <th>zMag</th>


      <th>xAXX</th>
      <th>yAXX</th>
      <th>zAXX</th>


      <th>roll</th>
      <th>pitch</th>
      <th>крен</th>
  
  
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
    </tr>
    
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
      <td>...</td>
      <td>...</td>
      <td>...</td>
      
    </tr>
  </tbody>
</table>


      </div>


      
        
        {%endblock%}


        
        {%block footer%}
        <footer>
        <p>&copy; defo 2012</p>
      </footer>
        
        
        {%endblock%}
</body>





















                <div class="modal hide fade" id="FilterModalWindows" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">настройки фильтров</h3>
                  </div>
                  <div class="modal-body">
                    <p class=row><div class="span6">
                    Фильтр Чебыщева
                    </div></p>

                  </div>
                  <div class="modal-footer">

                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Закрыть</button>
                  </div>
                </div>









                <div class="modal hide fade" id="SocketModalWindows" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h3 id="myModalLabel">настройки портов</h3>
                  </div>
                  <div class="modal-body">
                    <p class=row>
                    <div class="span2">
                    <div class="btn-group" data-toggle="buttons-radio">
                    {%for web_socket in ws%}
                      <button type="button" data-toggle="button" name="socket_{{web_socket.pk}}" value="{{web_socket.pk}}:{{web_socket.name}}:{{web_socket.type}}:{{web_socket.properties}}"  id="socket_{{web_socket.pk}}" class="btn btn-warning">{{web_socket}}</button><br>
                    {%endfor%}
                    </div>
                    </div>
                    

                    <div class="span2">
                    <div class="btn-group" data-toggle="buttons-radio">
                    {%for serial_socket in ss%}
                      <button type="button" data-toggle="button" name="serialsocket_{{serial_socket.pk}}" value="{{serial_socket.pk}}:{{serial_socket.name}}:{{serial_socket.type}}:{{serial_socket.properties}}" id="serialsocket_{{serial_socket.pk}}" class="btn btn-success">{{serial_socket}}</button><br>
                    {%endfor%}
                    </div>
                    </div>

                    </p>
                  </div>
                  <div class="modal-footer">
                    <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Закрыть</button>
<!--                    <button class="btn btn-primary">Сохранить</button>-->
                  </div>
                </div>
  
















</html>
